<template>
    <div>
        <el-select
            v-model="value"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择文章标签"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
                <span class="option-ctain-slot">
                    <span class="label">{{item.label}}</span>
                    <span @click="add">新增</span>
                </span>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [
                {
                    value: "HTML",
                    label: "HTML",
                },
                {
                    value: "CSS",
                    label: "CSS",
                },
                {
                    value: "JavaScript",
                    label: "JavaScript",
                },
            ],
            value: [],
        };
    },
    methods: {
        add() {
            window.event.stopPropagation();
            alert('新增')
        }
    }
};
</script>

<style lang="scss" scoped>
.option-ctain-slot{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
